<template>
  <div id="app">
    <!-- 加载界面 -->
    <div id="begin">
      <div id="loadingheader" style="margin-bottom:50vh">
        <span>萌宠小Q一宠物陪护神器</span>
      </div>
      <div class="example">
        <a-spin size="large"/>
        <div style="margin-top:3vh">
          加载中,请稍后...
        </div>
      </div>
    </div>
    <!-- 新手指导界面 -->
    <div id="guide">
      <div>
        <a-button type="primary" class="beginbtn" size="large"  @click="hideBtn()">
          点我开始进行操作吧！
        </a-button>
      </div>
    </div>
    <!-- 头部区域 -->
    <div id="header">
      <div class="table">
        <input type="text" placeholder="请输入token值" v-model="videoToken">
        <button class="btn" @click="emitToken()">确&emsp;&emsp;&emsp;定</button>
      </div>
    </div>
    <!-- 中央区域 -->
    <!-- 旋转按钮 -->
    <div id="content">

        <img src="./assets/images/向左旋转.png" id="roateleft"  alt="" @click="dipan_roateLeft()">
        <img src="./assets/images/向右旋转.png" id="roateright"  alt="" @click="dipan_roateRight()">
      <div id="direction">
        <!-- 方向键 -->
        <div class="directionImg">
          <img src="./assets/images/left.png" id="left"  class="img" alt="" @click="dipan_z()">
          <img src="./assets/images/down.png" id="down"  class="img" alt="" @click="dipan_x()">
          <img src="./assets/images/right.png" id="right"  class="img" alt="" @click="dipan_y()"> 
          <img src="./assets/images/up.png" id="up" class="img" alt="" @click="dipan_s()">
        </div>
      </div>

      <!-- 视频区域 -->
      <div id="webcam">
        <myVideo/>
      </div>
      <!-- 云台控制按钮 -->
        <div id="yuntai">
          <div class="yuntaiImg">
            <!-- 云台上数值：30-50  上下转
            云台下数值：20-70  左右转-->
            <img src="./assets/images/left.png" id="yunleft"  class="img" alt="" @click="yuntai_left()">
            <img src="./assets/images/down.png" id="yundown"  class="img" alt="" @click="yuntai_down()">
            <img src="./assets/images/right.png" id="yunright"  class="img" alt="" @click="yuntai_right()"> 
            <img src="./assets/images/up.png" id="yunup" class="img" alt="" @click="yuntai_up()">
          </div>
        </div>

      <div id="button"> 
        <img src="./assets/images/space.png" id="space" alt="" @click="shoot()">
      </div>


    </div>


    <!-- 底部区域 -->
    <div id="footer">Copyright © 2020 浪浪回家</div>
    <!-- <HelloWorld msg="点我点我啊啊啊啊"/> -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import myVideo from './components/myvideo.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    myVideo
  },
  //定义组件变量
  data(){
    return{
      token:'MIIZNwYJKoZIhvcNAQcCoIIZKDCCGSQCAQExDTALBglghkgBZQMEAgEwghdJBgkqhkiG9w0BBwGgghc6BIIXNnsidG9rZW4iOnsiZXhwaXJlc19hdCI6IjIwMjAtMDctMjVUMDg6Mzc6MzQuMDEyMDAwWiIsIm1ldGhvZHMiOlsicGFzc3dvcmQiXSwiY2F0YWxvZyI6W10sInJvbGVzIjpbeyJuYW1lIjoidGVfYWRtaW4iLCJpZCI6IjAifSx7Im5hbWUiOiJ0ZV9hZ2VuY3kiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9laXBfaXB2NiIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3YyeCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19zcG90X2luc3RhbmNlIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfaXZhc192Y3JfdmNhIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfaWVmX25vZGVncm91cCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19hc2NlbmRfa2FpMSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19rYWUxIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZGJzX3JpIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfYm1zX2hwY19oMmxhcmdlIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZXZzX2Vzc2QiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9pb2RwcyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2JhdGNoX2Vjc19jbHVzdGVyIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZWNzX2dwdV92MTAwIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfY2JzX3FpIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZHdzX3BvYyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19rYzFfdXNlcl9kZWZpbmVkIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfbWVldGluZ19lbmRwb2ludF9idXkiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9tZWVldGluZ193aGl0ZWJvYXJkX2J1eSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3Npc19zYXNyX2VuIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfVklTX0ludGwiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9lY3NfZ3B1X3AycyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2V2c192b2x1bWVfcmVjeWNsZV9iaW4iLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF92Y2MiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF92Y3AiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9kcHAiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9jdnIiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9lY3NfYzZuZSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX29jc21hcnRjYW1wdXMiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9ia3MiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9hcHBjdWJlIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfbWVldGluZ19oYXJkYWNjb3VudF9idXkiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9tdWx0aV9iaW5kIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfbmxwX210IiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfY3NlXzJuZCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2VpcF9wb29sIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfbWVlZXRpbmdfY3VycmVudF9idXkiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9pZWZfZnVuY3Rpb24iLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9hX2FwLXNvdXRoZWFzdC0zZCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3Byb2plY3RfZGVsIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfbTZtdCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2V2c19yZXR5cGUiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9hYWRfZnJlZSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2VsYl9ndWFyYW50ZWVkIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfYV9jbi1zb3V0aHdlc3QtMmIiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9zZnN0dXJibyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2h2X3ZlbmRvciIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FfY24tbm9ydGgtNGUiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9hX2NuLW5vcnRoLTRkIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfSUVDIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfdGFzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZGF5dV9kbG1fY2x1c3RlciIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2ludGxfY29uZmlndXJhdGlvbiIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3Npc19hc3Nlc3NfbXVsdGltb2RlbCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NjZV9tY3BfdGhhaSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX25scF9sZ190ZyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3NlcnZpY2VzdGFnZV9tZ3JfZHRtIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfYV9jbi1ub3J0aC00ZyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FfY24tbm9ydGgtNGYiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9jcGgiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9Nb2RlbEFydHNBc2NlbmQ5MTAiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9tZWV0aW5nX2hpc3RvcnlfY3VzdG9tX2J1eSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3dzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZWNzX2dwdV9nNXIiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF93a3Nfa3AiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9jY2lfa3VucGVuZyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3JpX2R3cyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2lvdGVkZ2VfY2FtcHVzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZWNzX29mZmxpbmVfZDYiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF92Z3ZhcyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX3ZwY19mbG93X2xvZyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX29wX2dhdGVkX2ljcyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FhZF9iZXRhX2lkYyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NzYnNfcmVwX2FjY2VsZXJhdGlvbiIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2llZl9lZGdlbWVzaCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Fpc19hcGlfaW1hZ2VfYW50aV9hZCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Rzc19tb250aCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NzZyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19jNngiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9zaXNfYXNzZXNzX2F1ZGlvIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfdWZzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZGVjX21vbnRoX3VzZXIiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF92aXBfYmFuZHdpZHRoIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZWNzX29sZF9yZW91cmNlIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZGNzX3JpIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfdmdpdnMiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9vYnNfZHVhbHN0YWNrIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZWRjbSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NzYnNfcmVzdG9yZSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2l2c2NzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfaXB2Nl9kdWFsc3RhY2siLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF92cG5fdmd3IiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfaXJ0YyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NjZV9ibXMyIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfcGNhIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfdmd3cyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NjZV9hc21faGsiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9jb25maWd1cmF0aW9uIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfY3Nic19wcm9ncmVzc2JhciIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2lvdi10cmlhbCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19jNnhfdmlydGlvX25ldCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2V2c19wb29sX2NhIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZGRzX2FybSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FfQ04tU09VVEgtMyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19vZmZsaW5lX2Rpc2tfNCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2JzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZ3NzX2ZyZWVfdHJpYWwiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9tZWV0aW5nX2Nsb3VkX2J1eSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2VwcyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NzYnNfcmVzdG9yZV9hbGwiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF8xMjMiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9sMmNnIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfV2VMaW5rX2VuZHBvaW50X2J1eSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FfY24tZWFzdC0yMDFiIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfcXVpY2tidXkiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9mY3NfcGF5IiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfaW90YW5hbHl0aWNzIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfbWF4aHViX2VuZHBvaW50X2J1eSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FfYXAtc291dGhlYXN0LTFlIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfYV9hcC1zb3V0aGVhc3QtMWQiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9ubHBfa2ciLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9hX2FwLXNvdXRoZWFzdC0xZiIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2llZl9kZXZpY2VfZGlyZWN0IiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfZGNzX2RjczJfcHJveHkiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9lY3NfdmdwdV9nNSIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2NzX2FybV9wb2MiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9lY3NfcmkiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9hX2FwLXNvdXRoZWFzdC0xYyIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2FfcnUtbm9ydGh3ZXN0LTJjIiwiaWQiOiIwIn0seyJuYW1lIjoib3BfZ2F0ZWRfdWxiX21paXRfdGVzdCIsImlkIjoiMCJ9LHsibmFtZSI6Im9wX2dhdGVkX2Vjc19hc2NlbmRfa2FpMXMiLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9pZWZfcGxhdGludW0iLCJpZCI6IjAifSx7Im5hbWUiOiJvcF9nYXRlZF9WaWRlb19DYW1wdXMiLCJpZCI6IjAifV0sInByb2plY3QiOnsiZG9tYWluIjp7Im5hbWUiOiJodzk3NTYxMTkyIiwiaWQiOiIwOTA1NTE2ZDJhODBmNWI1MGY0ZmMwMTM1NmZhNTMwMCJ9LCJuYW1lIjoiY24tbm9ydGgtNCIsImlkIjoiMDkwYzdkMWU4NDAwZjM0MTJmYjhjMDEzOTMwMjdmNzkifSwiaXNzdWVkX2F0IjoiMjAyMC0wNy0yNFQwODozNzozNC4wMTIwMDBaIiwidXNlciI6eyJkb21haW4iOnsibmFtZSI6Imh3OTc1NjExOTIiLCJpZCI6IjA5MDU1MTZkMmE4MGY1YjUwZjRmYzAxMzU2ZmE1MzAwIn0sIm5hbWUiOiJodzk3NTYxMTkyIiwicGFzc3dvcmRfZXhwaXJlc19hdCI6IiIsImlkIjoiMDkwNTUxNmUyMzgwZjViYjFmNDBjMDEzZTMwODdlODEifX19MYIBwTCCAb0CAQEwgZcwgYkxCzAJBgNVBAYTAkNOMRIwEAYDVQQIDAlHdWFuZ0RvbmcxETAPBgNVBAcMCFNoZW5aaGVuMS4wLAYDVQQKDCVIdWF3ZWkgU29mdHdhcmUgVGVjaG5vbG9naWVzIENvLiwgTHRkMQ4wDAYDVQQLDAVDbG91ZDETMBEGA1UEAwwKY2EuaWFtLnBraQIJANyzK10QYWoQMAsGCWCGSAFlAwQCATANBgkqhkiG9w0BAQEFAASCAQAwULulTw9kAP9pPavZgBKknJY0h8qWPwjGnLC69jE4HLC60oANN4C-gsYXMS1OXS6mRduyj-Q2Oq1kdBZp7PMVkOiujnKf5m9t24vr++BTcHODwBLgczSElJZMAyhWuADOXr1pmpK+55JaC5bojBEMwVMhxApAF9RnAYzJ54scrlTcc4MjqzgcOaPcwodQNmP+fh5yDz+yyYL8j2QjRct5MIc4LWs6ZunfxLyI43r1YXUEi6DHbd+Itya7pLxgRyYSg3djjEkm0g-DdpDE7eU8mkMjQOio+p5rKb4pK-aBe9yl513GkmAlQ-wSuCYBwf4ZOiUw3tvTNDaPlSsx+Ekt',
      yuntai_shang:35,//范围：30-50 
      yuntai_xia:45,//范围：20-70  
      videoToken:"",
      url:'/api/v5/iot/090c7d1e8400f3412fb8c01393027f79/devices/5f0803ae69c46102cb1af7c6_mytoy/commands'
    }
  },
  created(){
    var that = this;
    //监听键盘按下事件
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key == 32) {
          that.shoot();
          console.log('shoot');         
          document.getElementById("space").style.backgroundColor="#A9A9A9"
      }
      if (key == 87) {
          console.log('上');
          that.dipan_s()
          document.getElementById("up").style.backgroundColor="#A9A9A9"
      }
      if (key == 83) {
          console.log('下');
          that.dipan_x()
          document.getElementById("down").style.backgroundColor="#A9A9A9"
      }
      if (key == 65) {
          console.log('左');
          that.dipan_z()
          document.getElementById("left").style.backgroundColor="#A9A9A9"
      }
      if (key == 68) {
          console.log('右');
          that.dipan_y()
          document.getElementById("right").style.backgroundColor="#A9A9A9"
      }
      if (key == 38) {
          console.log('up');
          that.yuntai_up()
          document.getElementById("yunup").style.backgroundColor="#A9A9A9"
      }
      if (key == 40) {
          console.log('down');
          that.yuntai_down()
          document.getElementById("yundown").style.backgroundColor="#A9A9A9"
      }
      if (key == 37) {
          console.log('left');
          that.yuntai_left()
          document.getElementById("yunleft").style.backgroundColor="#A9A9A9"
      }
      if (key == 39) {
          console.log('right');
          that.yuntai_right()
          document.getElementById("yunright").style.backgroundColor="#A9A9A9"
      }
      if (key == 81) {
          console.log('roateleft');
          that.dipan_roateLeft()
          document.getElementById("roateleft").style.height="10vh"
      }  
      if (key == 69) {
          console.log('roateright');
          that.dipan_roateRight()
          document.getElementById("roateright").style.height="10vh"
      }     
    }
    //监听键盘抬起事件
    document.onkeyup = function(e){
      let key = window.event.keyCode;

        if (key == 87) {
          console.log('上');
          document.getElementById("up").style.backgroundColor="#FF6C81"
        }
        if (key == 83) {
          console.log('下');
          document.getElementById("down").style.backgroundColor="#FF6C81"
        }
        if (key == 65) {
          console.log('左');
          document.getElementById("left").style.backgroundColor="#FF6C81"
        }
        if (key == 68) {
          console.log('右');
          document.getElementById("right").style.backgroundColor="#FF6C81"
        }
        if (key == 32) {
          console.log('space');
          document.getElementById("space").style.backgroundColor=""
        }
        if (key == 38) {
          document.getElementById("yunup").style.backgroundColor="#FF6C81"
        } 
        if (key == 40) {
          document.getElementById("yundown").style.backgroundColor="#FF6C81"
        }
        if (key == 37) {
          document.getElementById("yunleft").style.backgroundColor="#FF6C81"
        }  
        if (key == 39) {
          document.getElementById("yunright").style.backgroundColor="#FF6C81"
        }
        if (key == 81) {
          document.getElementById("roateleft").style.height="15vh"
        } 
        if (key == 69) {
          document.getElementById("roateright").style.height="15vh"
        }                                  
    }
    //加载界面
    setTimeout(function(){
       document.getElementById('begin').style.display="none"
       }, 2000);
 }, 
  methods:{
    //发射
      shoot(){
        this.$axios({
          //请求类型为post
          method:'post',
          //请求路径
          url:this.url,
          //请求头
          headers: {
           'X-Auth-Token':this.token ,
           'Content-Type':'application/json'
          },
          //请求参数
          data: {
                "command_name": "SHOOT",//命令名称
                "paras": {
                    "start_shoot": 0 //命令参数
                },
                "service_id": "shoot"// serviceid
            }

          }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      },
    //云台上
      yuntai_s(){
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "YUNTAI_S",
                    "paras": {
                        "yuntai_s": this.yuntai_shang
                    },
                    "service_id": "yuntai"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      }, 
    //云台下
      yuntai_x(){
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "YUNTAI_x",
                    "paras": {
                        "yuntai_x": this.yuntai_xia
                    },
                    "service_id": "yuntai"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      },  
    //底盘上
      dipan_s(){
        console.log("前进")
        // document.getElementById("up").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("up").style.backgroundColor="red"
        // }, 100);
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "DIPAN_X",
                    "paras": {
                        "dianpan_x": 1
                    },
                    "service_id": "dipan"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
         
      },       
    //底盘下
      dipan_x(){
        // document.getElementById("down").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("down").style.backgroundColor="red"
        // }, 100);
         console.log("后退")
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "DIPAN_S",
                    "paras": {
                        "dianpan_s": 0
                    },
                    "service_id": "dipan"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      },   
    //底盘左
      dipan_z(){
         console.log("向左")
        // document.getElementById("left").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("left").style.backgroundColor="red"
        // }, 100);
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "DIPAN_Y",
                    "paras": {
                        "dianpan_y": 0
                    },
                    "service_id": "dipan"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      },
    //底盘右
      dipan_y(){
        console.log("向右");
        // document.getElementById("right").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("right").style.backgroundColor="red"
        // }, 100);
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "DIPAN_Z",
                    "paras": {
                        "dianpan_z": 0
                    },
                    "service_id": "dipan"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      }, 
    //底盘左旋转
      dipan_roateLeft(){
        // document.getElementById("roate").style.height="10vh"
        // setTimeout(() => {
        //   document.getElementById("roate").style.height="15vh"
        // }, 100);    
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "DIPAN_ROTATE_Z",
                    "paras": {
                        "dipan_rotate_z": 0
                    },
                    "service_id": "dipan"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      },  
    //底盘右旋转
      dipan_roateRight(){
        // document.getElementById("roate").style.height="10vh"
        // setTimeout(() => {
        //   document.getElementById("roate").style.height="15vh"
        // }, 100);    
            this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "DIPAN_ROTATE_Y",
                    "paras": {
                        "dipan_rotate_y": 0
                    },
                    "service_id": "dipan"
                }
    
              }).then(res=>{
		      console.log(res);
	      }).catch(err=>{
          console.log(err);     
        })
      },     
    //云台向上转
      yuntai_up(){
        this.yuntai_shang-=3;//云台每次转动数值
        if(this.yuntai_shang<30)//判断云台转动数值
        {
          this.$message.warning("云台向上转超过额定数值！")
          return;//拦截并返回
        }else{
          this.yuntai_s()
        }
        
      },   
    //云台向下转
      yuntai_down(){
        this.yuntai_shang+=3;
        // document.getElementById("yundown").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("yundown").style.backgroundColor="red"
        // }, 100);
        if(this.yuntai_shang>50)
        {
          this.$message.warning("云台向下转超过额定数值！")
          return;         
        }else{
          this.yuntai_s()
        }
      },
    //云台向左转
      yuntai_left(){
        this.yuntai_xia+=5;
        // document.getElementById("yunleft").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("yunleft").style.backgroundColor="red"
        // }, 100);        
        if(this.yuntai_xia>70)
        {
          this.$message.warning("云台向左转超过额定数值");
          return;         
        }else{
          this.yuntai_x()
        }
      },          
    //云台向右转s
      yuntai_right(){
        this.yuntai_xia-=5;
        // document.getElementById("yunright").style.backgroundColor="#A9A9A9"
        // setTimeout(() => {
        //   document.getElementById("yunright").style.backgroundColor="red"
        // }, 100);    
        if(this.yuntai_xia<20)
        {
           this.$message.warning("云台向转右超过额定数值");
          return;         
        }else{
          this.yuntai_x()
        }
      },
    //发送videoToken
      emitToken(){
        if(this.videoToken == ''){
          this.$message.warning("token不能为空")
          return 
        }else{
          this.$axios({
              method:'post',
              url:this.url,
              headers: {
               'X-Auth-Token':this.token,
               'Content-Type':'application/json'
              },
              data: {
                    "command_name": "SEVER_TOKEN",
                    "paras": {
                        "sever_token": this.videoToken
                    },
                    "service_id": "sever_token"
                }
    
              }).then(res=>{
          console.log(res);
          if (res.status==200){
             this.$message.success("token发送成功！")
          }else{
             this.$message.warning("token发送失败！")
          }
	      }).catch(err=>{
          this.$message.error("token发送失败！")    
          })
         }
       },
    //点击隐藏指导界面
      hideBtn(){
        document.getElementById('guide').style.display="none"
      }
  } 
}
</script>

<style scoped>
html{
	/* background-image: url(./assets/images/background.jpg);
	background-size: 115%;
	background-position-x: -140px;
	background-position-y: -35px;
	background-repeat: no-repeat; */
  width: 100%;
  height: 100vh; 
  overflow: hidden;
}
#app{
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}
#app::after {
  content: "";
  background: url(./assets/images/55.jpg);
  background-size: 100% 100%;
	background-repeat: no-repeat;
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
#begin{
  position: absolute;
  background-color:#FFD5DB ;
  height: 100%;
  width: 100%;
  z-index: 1000;
}
#guide{
  position: absolute;
  background: url(./assets/images/guide.png);
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;
  z-index: 100;
  display:flex;
  justify-content:center;
  align-items:center;

}
.beginbtn{}

.example {
  text-align: center;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
  height: 100%;
}

#loadingheader {
	height: 10vh;
	line-height: 10vh;
	text-align: center;
	font-size: 7vh;
	font-weight: bold;
  padding-top: 8vh;
  font-family: Arial;
  color: #FFF4F3;
  text-shadow: 0 0 10px #DB6274;
}
#header {
  position: relative;
  height: 10vh;
	text-align: center;
	font-size: 7vh;
	font-weight: bold;  
  font-family: Arial;
  color: #DC9A7C;
  margin: 0 auto;
}
.table{
  position: absolute;
  width: 100vw;
  text-align: center;
  top: 7vh;
}
input{
    outline-style: none ;
    /* border: 1px solid #ccc;  */
    border-radius: 1.5vh;
    padding: .5vh .5vw;
    width: 30vw;
    font-size: 2.5vh;
    font-weight: 700;
    font-family: "Microsoft soft";
}
input:focus{
    border-color: #464849;
    outline: 0;
    -webkit-box-shadow: inset 0 .5px .5px rgba(0,0,0,.075),0 0 8px #FFB8C2;
    box-shadow: inset 0 .5px .5px rgba(0,0,0,.075),0 0 8px #FFB8C2
}
.btn{
		border:1.5px solid #ADADAD;
		padding: .5vh 2vw;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 3vh;
		border-radius: 1.5vh;
		background: #E8C1AF;
		color: white;
    margin-left: 3vw;
}
#content
{ 
 padding:10vh 0;
 height: 75vh;
 position: relative;
 margin-top: 5vh;
}
#webcam{
  width:50vw;
  height:100%;
  margin: 0 auto;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 20px #FFB8C2;
}

#direction {
	position: absolute;
	top: 40vh;
}
.directionImg{
  display: flex;
  width:46vh;
  flex-wrap:wrap-reverse;
  margin-left: 2vw;
}

#yuntai {
	position: absolute;
	top: 40vh;
  right: 2vw;
}
.yuntaiImg{
  display: flex;
  width:45vh;
  flex-wrap:wrap-reverse;
  margin-left: 2vw;
}
.roatestyle{
  border: 1px solid black;
}
#roateleft{
  position: absolute;
  height: 15vh;
  left: 5vw;
} 
#roateright{
  position: absolute;
  height: 15vh;
  left: 13vw;
}
#button {
	position: absolute;
	margin: 0 auto;
	top: 10vh;
  right: 7vw;
  border: 5px solid #E8989A;
  border-radius:50% ;
  box-shadow: 0 0 15px #E8989A;
}
#button img{
	border-radius: 50%;
	height: 20vh;
  width: 20vh;
}
#footer {
	margin-top:4vh;
  padding-bottom:.5vh;
	text-align: center;
  font-size: 3vh;
}
.img{
	position: relative;
	background-color: #FF6C81;
	border-radius: 50%;
	height: 13vh;
  margin: 1vh;
}
/* 图片位置属性 */
#up{
	left:34% ;
}
#yunup{
  left:34% ;
}
/* #down{
  top: ;
  left: ;

}
#left{
  top: ;
  left: ;

}
#right{
  top: ;
  left: ;
} */
.roate{
  height: 10vh;
}
</style>>

